(_ => {
    const __window_onload__ = window.onload
    window.onload = (event) => {
        __window_onload__ && __window_onload__(event)

        // 配置
        const border_hot_size = 4
        const corner_hot_size = 4
        // 不可变项
        const hot_style = {
            position: 'absolute',
            margin: '0',
            padding: '0',
            background: 'transparent'
        }

        // 辅助函数
        const set_hot_style = (target, option_list) => {
            for (let options of option_list) {
                const hot_area = document.createElement('div')
                Object.entries({...hot_style, ...options.style}).map(([item, value]) => {
                    hot_area.style[item] = value
                })
                const status = {
                    resize: false,
                    old_style: null,
                    old_event: null
                }

                const hot_area_mousemove = event => {
                    status.resize && options.listener && options.listener(event, status.old_style, status.old_event)
                }

                const hot_area_mouseup = _ => {
                    status.resize = false
                    status.old_style = null
                    status.old_event = null
                    document.removeEventListener('mousemove', hot_area_mousemove)
                    document.removeEventListener('mouseup', hot_area_mouseup)
                    document.body.style.cursor = 'auto'
                }

                hot_area.addEventListener('mousedown', event => {
                    status.resize = true
                    status.old_style = {
                        width: target.clientWidth,
                        height: target.clientHeight,
                        left: +target.style.left.replace('px', ''),
                        top: +target.style.top.replace('px', '')
                    }
                    status.old_event = event
                    document.addEventListener('mousemove', hot_area_mousemove)
                    document.addEventListener('mouseup', hot_area_mouseup)
                    document.body.style.cursor = options.style.cursor
                })
                target.appendChild(hot_area)
            }
        }

        let max_width = document.body.clientWidth - 10
        let max_height = document.body.clientHeight - 10

        const __window_resize__ = window.onresize

        window.onresize = (event) => {
            __window_resize__ && __window_onload__(event)
            max_width = document.body.clientWidth - 10
            max_height = document.body.clientHeight - 10
        }


        const dom_list = document.querySelectorAll('[resize]')

        dom_list.forEach((item) => {

            if (['false', 'not', 'no',].includes(item.getAttribute('resize'))) {
                return
            }

            // 设置相对定位 或保持元素的绝对定位或固定定位
            if (!['absolute', 'fixed', 'relative'].includes(item.style.position)) {
                item.style.position = 'relative'
            }

            const range = {
                min_width: +item.getAttribute('min-width') || 50,
                min_height: +item.getAttribute('min-height') || 100,
                max_width: +item.getAttribute('max-width') || max_width,
                max_height: +item.getAttribute('max-height') || max_height,
            }

            // options_list
            const option_map = {
                'top': 0,
                'bottom': 1,
                'left': 2,
                'right': 3,
            }
            const options_list = [
                // top
                {
                    style: {
                        width: `calc(100% - ${corner_hot_size}px)`,
                        height: `${border_hot_size}px`,
                        top: -border_hot_size / 2 + 'px',
                        left: corner_hot_size / 2 + 'px',
                        cursor: 'ns-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        const delta_y = old_event.clientY - event.clientY
                        let result = old_style.height + delta_y

                        if (result > range.min_height) {
                            item.style.top = `${event.clientY}px`
                            result = `${result}px`
                        }
                        if (result > range.max_height) {
                            result = `${range.max_height}px`
                        }
                        item.style.height = result
                    }
                },
                // bottom
                {
                    style: {
                        width: `calc(100% - ${corner_hot_size}px)`,
                        height: `${border_hot_size}px`,
                        bottom: -border_hot_size / 2 + 'px',
                        left: corner_hot_size / 2 + 'px',
                        cursor: 'ns-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        const delta_y = event.clientY - old_event.clientY
                        let result = old_style.height + delta_y
                        if (result > range.min_height) {
                            result = `${result > 20 ? result : 20}px`
                        }
                        if (result > range.max_height) {
                            result = `${range.max_height}px`
                        }
                        item.style.height = result
                    }
                },
                // left
                {
                    style: {
                        width: `${border_hot_size}px`,
                        height: `calc(100% - ${corner_hot_size}px)`,
                        top: corner_hot_size / 2 + 'px',
                        left: -border_hot_size / 2 + 'px',
                        cursor: 'ew-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        const delta_x = event.clientX - old_event.clientX
                        let result = old_style.width - delta_x
                        if (result > range.min_width) {
                            item.style.left = `${event.clientX}px`
                            result = `${result}px`
                        }
                        if (result > range.max_width) {
                            result = `${range.max_width}px`
                        }
                        item.style.width = result
                    }
                },
                // right
                {
                    style: {
                        height: `calc(100% - ${corner_hot_size}px)`,
                        width: `${border_hot_size}px`,
                        top: corner_hot_size / 2 + 'px',
                        right: -border_hot_size / 2 + 'px',
                        cursor: 'ew-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        const delta_x = event.clientX - old_event.clientX
                        let result = old_style.width + delta_x
                        if (result > range.min_width) {
                            result = `${result > 20 ? result : 20}px`
                        }
                        if (result > range.max_width) {
                            result = `${range.max_width}px`
                        }
                        item.style.width = result
                    }
                }
            ]
            options_list.push(
                // top-left
                {
                    style: {
                        width: `${corner_hot_size}px`,
                        height: `${corner_hot_size}px`,
                        top: -corner_hot_size / 2 + 'px',
                        left: -corner_hot_size / 2 + 'px',
                        cursor: 'nwse-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        options_list[option_map['top']].listener(event, old_style, old_event)
                        options_list[option_map['left']].listener(event, old_style, old_event)
                    }
                },
                // top-right
                {
                    style: {
                        width: `${corner_hot_size}px`,
                        height: `${corner_hot_size}px`,
                        top: -corner_hot_size / 2 + 'px',
                        right: -corner_hot_size / 2 + 'px',
                        cursor: 'nesw-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        options_list[option_map['top']].listener(event, old_style, old_event)
                        options_list[option_map['right']].listener(event, old_style, old_event)
                    }
                },
                // bottom-left
                {
                    style: {
                        width: `${corner_hot_size}px`,
                        height: `${corner_hot_size}px`,
                        bottom: -corner_hot_size / 2 + 'px',
                        left: -corner_hot_size / 2 + 'px',
                        cursor: 'nesw-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        options_list[option_map['bottom']].listener(event, old_style, old_event)
                        options_list[option_map['left']].listener(event, old_style, old_event)
                    }
                },
                // bottom-right
                {
                    style: {
                        width: `${corner_hot_size}px`,
                        height: `${corner_hot_size}px`,
                        bottom: -corner_hot_size / 2 + 'px',
                        right: -corner_hot_size / 2 + 'px',
                        cursor: 'nwse-resize'
                    },
                    listener: (event, old_style, old_event) => {
                        options_list[option_map['bottom']].listener(event, old_style, old_event)
                        options_list[option_map['right']].listener(event, old_style, old_event)
                    }
                },
            )
            // 创建四边元素
            // 顶部
            set_hot_style(item, options_list)
        })
    }
})()